<template>
    <div>
        <h1>散点图</h1>
        <div class="case-desc">
            <p>散点图，也是一种常见的图表类型。散点图由许多“点”组成，有时，这些点用来表示数据在坐标系中的位置（比如在笛卡尔坐标系下，表示数据在 x 轴和 y 轴上的坐标；在地图坐标系下，表示数据在地图上的某个位置等）；有时，这些点的大小、颜色等属性也可以映射到数据值，用以表现高维数据。</p>
        </div>
        <el-collapse accordion>
            <el-collapse-item title="基础散点图" name="1">
                <template #title>
                    <h2>基础散点图<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/scatter/basic-scatter#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE">#</a>
                    </h2>
                </template>
                <Case1 />
                <br>
            </el-collapse-item>
            <el-collapse-item title="笛卡尔坐标系下的散点图" name="2">
                <template #title>
                    <h2>笛卡尔坐标系下的散点图<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/scatter/basic-scatter#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE">#</a>
                    </h2>
                </template>
                <Case2 />
                <br>
            </el-collapse-item>
            <el-collapse-item title="散点图样式设置" name="3">
                <template #title>
                    <h2>散点图样式设置<a href="https://echarts.apache.org/handbook/zh/how-to/chart-types/scatter/basic-scatter#%E7%AC%9B%E5%8D%A1%E5%B0%94%E5%9D%90%E6%A0%87%E7%B3%BB%E4%B8%8B%E7%9A%84%E6%95%A3%E7%82%B9%E5%9B%BE">#</a>
                    </h2>
                </template>
                <Case3 />
                <br>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script setup>
    import Case1 from './ScatterCase1.vue';
    import Case2 from './ScatterCase2.vue';
    import Case3 from './ScatterCase3.vue';
</script>

<style lang="scss" scoped>

</style>
